<div class="container" [ngClass]="{'fixed-anchor': anchorShow}">
    <!-- WRAPPER -->
    <div class="container-wrapper wrapper-bg"
        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/bg-center.png)'">
        <!-- HEADER -->
        <div class="container-header"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/bg-header.png)'">
            <img src="{{deployUrl}}assets/img/end-year/shenhao/shenhao-title.png" alt="神豪榜">
        </div>
        <!-- MAIN -->
        <div class="container-main">
            <!-- 规则 -->
            <div class="container-main__rule">
                <p>
                    1、活动时间：12月8日 00:00:00~19日 23:59:59；
                </p>
                <p>
                    2、所有用户均可参与；
                </p>
                <p>
                    3、榜单根据用户获得的神豪值进行降序排名，神豪值可通过在直播间内送礼获得，1钻石=1神豪值，送出宝箱按照宝箱开出礼物的实际价格计榜，送神秘商店产出的礼物按1钻石=1.5神豪值统计；
                </p>
                <p>
                    4、活动结束后榜单前10名获得奖励。
                </p>
            </div>
            <!-- 分割线 -->
            <div class="container-main__divider"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/rule-divider.png)'">
            </div>
            <!-- 活动已结束 -->
            <div *ngIf="status === 3" class="container-main__end"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/activity-end-bg.png)'">
                活动已结束
            </div>
            <!-- TOP3 -->
            <div class="container-main__top3"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/shenhao/shenhao-top3-bg.png)'">
                <!-- TOP3-1,2,3 -->
                <div class="top3-item" *ngFor="let anchor of top3List,let i = index" [ngClass]="'top3-'+(i+1)">
                    <div class="top3--avatar"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/shenhao/shenhao-top3-avatar-'+(i+1)+'.png)'">
                        <img [src]=" anchor.avatarUrl | headImg" [alt]="anchor.nickname">
                        <!-- <ng-container *ngIf="anchor.liveStatus">
                            <img *ngIf="isAndroid" class="top3--avatar__live"
                                [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                            <img *ngIf="!isAndroid" class="top3--avatar__live"
                                [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                        </ng-container> -->
                    </div>
                    <div class="top3--nickname">{{anchor.nickname}}</div>
                    <div class="top3--value">神豪值:{{anchor.score | withHundredMillion}}</div>
                    <!-- top-1 不展示距上名 展示mvp标签 -->
                    <div class="top3--gap" *ngIf="anchor.rank !== 1">{{anchor.rankDesc}}</div>
                    <div class="top3--tag" *ngIf="anchor.rank === 1">
                        <img src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
                    </div>
                </div>
            </div>
            <!-- OTHERS -->
            <div class="container-main__others">
                <div class="others-header"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-header-bg.png)'">
                    <div class="index">排名</div>
                    <div class="detail">用户信息</div>
                    <div class="value">神豪值</div>
                </div>
                <div class="others-main"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-bg.png)'" #main>
                    <!-- item -->
                    <!-- placeholder -->
                    <div *ngIf="othersList.length === 0" class="other-main__holder">
                        暂无数据
                    </div>
                    <div *ngFor="let anchor of othersList" class="others-main__item"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg.png)'">
                        <div class="index">{{anchor.rank}}</div>
                        <div class="detail">
                            <!-- avatar -->
                            <div class="detail-avatar">
                                <img class=" detail-avatar__main" [src]="anchor.avatarUrl" alt="">
                                <!-- <ng-container *ngIf="anchor.liveStatus">
                                    <img *ngIf="isAndroid" class="detail-avatar__live"
                                        [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                    <img *ngIf="!isAndroid" class="detail-avatar__live"
                                        [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                </ng-container> -->
                            </div>
                            <div class="detail-info">
                                <div class="detail-info--name">{{anchor.nickname}}</div>
                                <div class="detail-info--gap">
                                    {{anchor.rankDesc}}
                                </div>
                            </div>
                        </div>
                        <div class="value">{{anchor.score | withHundredMillion}}</div>
                    </div>
                    <!-- spinner -->
                    <div class="others-main__spinner">
                        <div class="spinner-content" (click)="getMore()">
                            <ng-container *ngIf="pageSize<100&&othersList.length+3===pageSize; else tips">
                                查看更多
                            </ng-container>
                            <ng-template #tips>
                                {{othersList.length+3===100?'本榜单只显示前100名':loading?'.....':''}}
                            </ng-template>
                        </div>
                    </div>
                    <!-- item -->
                </div>
                <div class="others-footer"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-footer-bg.png)'">
                </div>
            </div>
        </div>
        <div class="container-footer"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/bg-footer.png)'">
            <p *ngIf="!isAndroid && !isPC">声明：本活动与Apple Inc.无关</p>
            <p>请用户注意，适度娱乐，理性消费</p>
        </div>
        <!-- 直播间主播 -->
        <div class="others-main__item"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg-unique.png)'">
            <div class="index">{{currentAnchorInfo.rank}}</div>
            <div class="detail">
                <div class="detail-avatar">
                    <img class="detail-avatar__main" [src]="currentAnchorInfo.avatarUrl | headImg" alt="">
                </div>
                <div class="detail-info">
                    <div class="detail-info--name">{{currentAnchorInfo.nickname}}</div>
                    <div class="detail-info--gap">{{currentAnchorInfo.rankDesc}}</div>
                </div>
            </div>
            <div class="value">{{currentAnchorInfo.score | withHundredMillion}}</div>
        </div>
    </div>
</div>